<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      table {
        width: 200px;
        height: 200px;
        background-color: aqua;

        border: solid;
      }
      .row1 {
        background-color: palegoldenrod;
        height: 120px;
      }
      .row2 {
        background-color: chocolate;
      }
      /* td{
        padding: 5px;
     } */
    </style>
  </head>
  <body>
    <!-- 
        table 表格标签 用于展示数据
        基本结构：
            <table>
                <tr>
                  <td></td>
                </tr>
            </table>
        table控制整体表格，tr代表一行，td代表一个单元格

        table属性：
            1.border 边框属性
                默认1px但不显示，设置soild就会显示
            2.width 宽
            3.height 高
            4.aligin 排列方式
                整个表格靠左或靠右，只能设置在行内
            5.cellspacing 单元格之间的间距
                设置在行内
            6.cellpadding 单元格的内边距
                设置在行内，不推荐使用
            7.rules 
                设置在行内
                rows 只有横向
                cols 只有纵向
        tr属性：
            1.height 高度，不能设置宽度，宽度由table决定
            2.align 水平对齐方式
            3.valign 垂直对齐方式
        td属性：
            1.width
                宽，影响一整列
            2.height
                高，影响一整行
            3.align 水平对齐方式
            4.valign 垂直对齐方式
            5.colspan 水平延长
            6.rowspan 垂直延长

            注：若要2x2合并，须分步延长
                延长只会向下或向右延长
                延长要有其他行作为依据，若以延长到头则不会继续延长
        
        一般设置在行内的元素大都不实用，实际开发过程可能使用css
     -->
  </body>
  <table align="left" cellspacing="5px">
    <tr class="row1">
      <td align="center" rowspan="2">111</td>
      <td align="center">222</td>
    </tr>
    <tr class="row2">
      <td >333</td>
      <td>444</td>
    </tr>
  </table>
</html>
